<!--
 * @Descripttion: 商品详情
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2019-12-13 14:53:19
 -->
<template>
  <div class="app-container paddingT50">
    <affix>
      <div class="paddingLR20 clearfix">
        <el-card shadow="never" class="oper-btn-card">
          <el-button type="default" @click="btnAddData">新增规格</el-button>
          <el-button type="default" @click="btnCancle">取 消</el-button>
          <el-button type="primary" :loading="btnLoading.save" @click="btnSaveData">保 存</el-button>
          <el-button type="primary" @click="btngetData">获取值</el-button>
        </el-card>
      </div>
    </affix>
    <vxe-grid
      ref="table"
      class="grid"
      border
      size="small"
      resizable
      highlight-hover-row
      :edit-config="{trigger: 'click', mode: 'row'}"
      :columns="columnsData"
      :data="tableData.specs"
      @edit-closed="onEditClosed"
    />
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.totalCount"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { column2emptyObj } from '@/libs/util.js'
import Affix from '@/components/Affix'
import SpValue from './sp-values'
import { saveData, getData } from '@/api/goods/goods-temp.js'
import { getDelButton } from '@/components/Table/oper-btns.js'
import XEUtils from 'xe-utils/methods/xe-utils'
import clonedeep from 'clonedeep'

export default {
  name: 'GoodSaveMain',
  components: { Affix },
  mixins: [oftenuse],
  props: {
  },
  data() {
    return {
      dialogVisible: false,
      columnsData: [
        { title: '操作', width: 60,
          slots: {
            default: (params) => {
              const { row } = params
              const h = this.$createElement
              const delBtnNode = getDelButton(h, { on: { click: () => { this.btnDelData(row) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [delBtnNode])
              return [divNode]
            }
          }
        },
        { field: 'label', title: '规格名', editRender: { name: 'ElInput' }, width: 150 },
        { field: 'data', title: '规格值',
          slots: {
            default: (params) => {
              const { row, column } = params
              const data = {
                props: {},
                model: {
                  value: XEUtils.get(row, column.property),
                  callback(value) {
                    XEUtils.set(row, column.property, value)
                  }
                }
              }
              return [
                <SpValue {...data}/>
              ]
            }
          }
        }
      ]
    }
  },
  watch: {
  },
  created() {
    this.setTableData('specs', [])
    this.initData()
  },
  destroyed() {
  },
  mounted() {
  },
  methods: {
    btngetData() {
      const data = this.getVxeTableData()
      console.log(data)
    },
    btnSaveData() {
      const data = clonedeep(this.getVxeTableData())
      data.forEach(element => {
        delete element._XID
      })
      if (!data.length) return this.$message.error('至少有一个规格！')
      const params = {
        tempId: '1',
        specs: JSON.stringify(data)
      }
      this.setBtnLoading('save', true)
      this.saveData(params).then(_ => {
        this.setBtnLoading('save', false)
      }).catch(_ => {
        this.setBtnLoading('save', false)
      })
    },
    btnCancle() {
      this.setTableData('specs', [])
      this.getGoodsTemp()
    },
    btnAddData() {
      const tableData = this.getTableData('specs')
      const data = column2emptyObj(this.columnsData)
      data.label = `规格${tableData.length}`
      data.data = []
      tableData.push(data)
    },
    btnDelData(row) {
      this.$confirm('确定要删除该单位吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delData([row])
      }).catch(() => {
      })
    },
    // api
    initData() {
      this.getGoodsTemp()
    },
    saveData(params) {
      return saveData(params).then(res => {
        if (res.data.flag) {
          this.$notify.success({ title: '保存成功！' })
        } else {
          this.$notify.error({ title: '保存失败！', message: res.data.message || '' })
        }
      }).catch(err => {
        this.$notify.error({ title: '保存异常！', message: err.message || '' })
      })
    },
    delData(rows) {
      this.$refs.table.remove(rows)
    },
    getGoodsTemp() {
      getData({ tempId: '1' }).then(res => {
        if (res.data.flag) {
          const data = res.data.data[0]
          const spData = JSON.parse(data.specs)
          this.setTableData('specs', spData)
        }
      })
    },
    getVxeTableData() {
      return this.$refs.table.getTableData().tableData
    },
    onEditClosed(params, val) {
    },
    onSizeChange() {},
    onCurrentChange() {}
  }
}
</script>

<style scoped>
</style>
